<template>
  <view class="whe_maxv pad_10 boxs" style="background-color: #f8f8f8">
    <view class="wh_f pad_10_0">
      <view class="flex_1 fz_36 em wz_lv">
        <text>168</text>
      </view>
      <view @click="show = true">
        <view style="height: 20px"></view>
        <text class="centerdq fz_12">截止至今</text>
        <image class="centerdq" src="../../static/icon/right.png" style="margin: 0 10px;transform: rotate(90deg);;width: 5px;height: 10px" alt="" />
      </view>
    </view>

    <view class="ba_white bor_10 pad_20 boxs">
      <view class="fz_14">
        <text :class="istabs === 1?'tabs_xz':'tabs_wxz'" style="border-radius: 5px;padding: 2px 5px;">全部</text>
        <text :class="istabs === 2?'tabs_xz':'tabs_wxz'" style="margin: 0 10px;border-radius: 5px;padding: 2px 5px;">已获取</text>
        <text :class="istabs === 3?'tabs_xz':'tabs_wxz'" style="border-radius: 5px;padding: 2px 5px;">已消耗</text>
      </view>
      <view class="pad_10_0 em fz_18">
        <text>截止至今获取 </text>
        <text class="wz_lv"> 170 </text>
        <text>已消耗</text>
        <text class="wz_lv"> 2</text>
      </view>

      <view class="pad_10_0 bor_b_hui">
        <view class="wh_f pad_b_10">
          <view class="flex_1 fz_16">签到积分</view>
          <view class="wz_lv">+5</view>
        </view>
        <view class="fz_10 wz_hui">2025.06.14</view>
      </view>
      <view class="pad_10_0 bor_b_hui">
        <view class="wh_f pad_b_10">
          <view class="flex_1 fz_16">签到积分</view>
          <view class="wz_lv">+5</view>
        </view>
        <view class="fz_10 wz_hui">2025.06.14</view>
      </view>
      <view class="pad_10_0 bor_b_hui">
        <view class="wh_f pad_b_10">
          <view class="flex_1 fz_16">签到积分</view>
          <view class="wz_lv">+5</view>
        </view>
        <view class="fz_10 wz_hui">2025.06.14</view>
      </view>

    </view>
    <up-datetime-picker
        hasInput
        :show="show"
        v-model="value1"
        mode="date"
        @cancel="close"
        @confirm="confirm"
    ></up-datetime-picker>
  </view>
</template>
<script>
export default {
  name: "index",
  data(){
    return{
      istabs:1,
      show:true,
      timeline:'',
      value1: Number(new Date()),
      array: ['选项1', '选项2', '选项3'],
      index: 0
    }
  },
  methods:{
    close(){
      this.show = false
    },
    confirm(e){
      this.show = false
      console.log(e)
    }
  }
}
</script>
<style scoped lang="scss">
.tabs_xz{
  background-color: #3a9e5f;
  color: white;
  border: 1px solid #ffd166;
}
.tabs_wxz{
  background-color: #d5f0dd;
  color: #383838;
  border: 1px solid #3a9e5f;
}
</style>
